<template>
  <div>
    <el-card>
      <!-- 头部表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
        ref="ruleForm"
        v-show="showSearch"
      >
        <el-form-item label="用户账号">
          <el-input
            v-model="formInline.username"
            placeholder="请输入用户账号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户类型">
          <el-select
            v-model.number="formInline.userType"
            placeholder="请选择用户类型"
          >
            <el-option label="普通用户" :value="1"></el-option>
            <el-option label="超级管理员" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结果">
          <el-select
            v-model.number="formInline.result"
            placeholder="请选择结果"
          >
            <el-option label="成功" :value="0"></el-option>
            <el-option label="认证失败" :value="1"></el-option>
            <el-option label="用户被禁用" :value="2"></el-option>
            <el-option label="未找到验证码" :value="3"></el-option>
            <el-option label="验证码无效" :value="4"></el-option>
            <el-option label="未知错误" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访问系统">
          <el-input
            v-model="formInline.accessSystem"
            placeholder="请输入访问系统"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            @click="onSubmit"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="resize('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <!-- <el-col :span="1.5">
                    <el-button icon="el-icon-download"
                               size="mini"
                               @click="handleExport"
                               v-hasPermi="['monitor:operlog:export']">导出</el-button>
                </el-col> -->
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        :data="tableData"
        height="calc(100vh - 300px)"
        v-loading="loading"
      >
        <!-- <el-table-column prop="traceId" label="链路追踪编号" align="center">
        </el-table-column> -->
        <el-table-column prop="username" label="用户账号" align="center">
        </el-table-column>
        <el-table-column prop="userType" label="用户类型" align="center">
          <template slot-scope="scope">{{
            scope.row.userType == 1 ? "普通用户" : "超级管理员"
          }}</template>
        </el-table-column>
        <el-table-column prop="userIp" label="用户IP" align="center">
        </el-table-column>
        <el-table-column
          prop="userAgent"
          label="浏览器 UA"
          :show-overflow-tooltip="true"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column prop="result" label="结果" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.result == 0 ? 'success' : 'danger'">{{
              scope.row.result | getResult
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="clientId" label="客户端 id" align="center">
          <template slot-scope="scope">
            {{
              scope.row.clientId == "-1" ? "统一门户平台" : scope.row.clientId
            }}
          </template>
        </el-table-column> -->
        <el-table-column prop="accessSystem" label="访问系统" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <!--  <el-table-column prop="updateTime" label="更新时间" align="center">
        </el-table-column>
        <el-table-column prop="creator" label="创建人" align="center">
        </el-table-column>
        <el-table-column prop="updater" label="更新人" align="center">
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="formInline.pageNum"
        :limit.sync="formInline.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 详情 -->
    <el-dialog
      title="日志详情"
      :visible.sync="open"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="110px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="id：">{{ form.id }}</el-form-item>
            <el-form-item label="日志类型：">{{ form.logType }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="链路追踪编号：">{{
              form.traceId
            }}</el-form-item>
            <el-form-item label="用户id：">{{ form.userId }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型：">{{ form.userType }}</el-form-item>
            <el-form-item label="用户账号：">{{ form.username }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户ip：">
              {{ form.userIp }}
            </el-form-item>
            <el-form-item label="浏览器UA：">{{ userAgent }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="访问系统：">{{
              form.accessSystem
            }}</el-form-item>
            <el-form-item label="客户端id：">{{ form.clientId }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">{{
              form.createTime
            }}</el-form-item>
            <el-form-item label="更新时间：">{{
              form.uodateTime
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人：">{{ form.creator }}</el-form-item>
            <el-form-item label="更新人：">{{ form.updater }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结果：">{{ form.result }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cloudOperation_API, //云产品运维审计
} from "@/api/cloudResources/resources.js";
import Template from "../ConfigurationManagement/model/Template.vue";
export default {
  components: { Template },
  data() {
    return {
      // 总条数
      total: 10,
      // 显示搜索条件
      showSearch: true,
      tableData: [],
      loading: false,
      //搜索参数
      formInline: {
        pageNum: 1, //页码
        pageSize: 10, //页数
        result: undefined, //结果
        username: undefined, //用户账号
        userType: undefined, //用户类型
        accessSystem: undefined, //示例值：访问系统
      },

      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
    };
  },
  methods: {
    getList() {
      this.loading = true;
      cloudOperation_API(this.formInline).then((res) => {
        if (res.rows) {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        }
      });
    },
    //查询
    onSubmit() {
      this.getList();
    },
    //重置
    resize() {
      this.formInline = {
        pageNum: 1, //页码
        pageSize: 10, //页数
        result: undefined, //结果
        username: undefined, //用户账号
        userType: undefined, //用户类型
        accessSystem: undefined, //示例值：访问系统
      };
      this.getList();
    },

    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
  },
  //初始化数据
  created() {
    this.getList();
  },
  filters: {
    getResult(value) {
      switch (value) {
        case 0:
          return "成功";
        case 1:
          return "认证失败";
        case 2:
          return "用户禁用";
        case 3:
          return "未找到验证码";
        case 4:
          return "验证码无效";
        case 5:
          return "未知错误";
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>